<template>
    <div class="rightCon">
      <div v-show="firstStep">
        <el-form  :model="loginInfo" :rules="loginRules" class=""  ref="registerVaildOne">
          <el-form-item prop="phoneUser">
            <el-input ref='registerPhone' type="tel" placeholder="" maxLength="11" auto-complete="off"
              v-model.trim="loginInfo.phoneUser"></el-input>
            <span class="input-placeholder" @click="getFocus('registerPhone')" v-if="!loginInfo.phoneUser">填写手机号</span>
          </el-form-item>
          <transition name="fade">
            <el-form-item prop="codeUser2" class="verifyCode" v-show="checkPhone">
              <el-input ref='registerCode' class="msgcode" maxLength="5" v-model.trim="loginInfo.codeUser2"  placeholder=""></el-input>
              <span class="input-placeholder" @click="getFocus('registerCode')" v-if="!loginInfo.codeUser2">请输入右边验证码信息</span>
              <el-tooltip class="item" effect="light" content="点击切换" placement="top-end">
                <div class="randomCode" style="padding: 0;border: none"> <div id="v_container" style="width: 97px;height: 40px;margin: 0 auto;"></div></div>
              </el-tooltip>
            </el-form-item>
          </transition>
          <el-form-item prop="passWord">
            <el-input ref='registerPwd' type="password" maxLength="20"  @keyup.native="pwS(loginInfo.passWord)"  v-model.trim="loginInfo.passWord"  placeholder="填写密码(8-20位字符)"></el-input>
            <span class="input-placeholder" @click="getFocus('registerPwd')" v-if="!loginInfo.passWord">填写密码(8-20位字符)</span>
            <div class="strength">
              <div class="strengthA"></div>
              <div class="strengthB"></div>
              <div class="strengthC"></div>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer loading-wrapper">
          <el-button :loading="loadingBool" @click="nextStep()" :disabled="ableLogin">注&nbsp;&nbsp;册</el-button>
          <p>已有账号？<span @click="login()">立即登录</span></p>
          <p class="agreement" :class="{agreementBottom: checkPhone}">注册代表您已经阅读并同意<a @click="gokConcat()">《国科学院用户协议》</a></p>
        </span>
      </div>
      <div v-show="!firstStep">
        <div class="iconmsg"><span class="icon-send"></span></div>
        <p class="sendsuccess">验证码已发送至<span v-text="loginInfo.phoneUser" style="margin-left: 10px"></span></p>
        <el-form ref="registerVaild"  :model="loginInfo" :rules="loginRules" class="" >
          <transition name="fade1">
            <el-form-item prop="codeUser1" class="verifyCode" v-if="!firstSent">
              <el-input ref='registerCodeUser1' class="msgcode" maxLength="5" v-model.trim="loginInfo.codeUser1"  placeholder=""></el-input>
              <el-tooltip class="item" effect="light" content="点击切换" placement="top-end">
                <el-button class="randomCode" style="padding: 0;border: none"> <div id="v_container2" style="width: 97px;height: 40px;margin: 0 auto;"></div></el-button>
              </el-tooltip>
              <span class="input-placeholder" @click="getFocus('registerCodeUser1')" v-if="!loginInfo.codeUser1">请输入右边验证码信息</span>
            </el-form-item>
          </transition>
          <el-form-item prop="codeUser" class="sendmsg">
            <el-input ref='registerCodeUser' class="msgcode" maxLength="6" v-model.trim="loginInfo.codeUser"  placeholder=""></el-input>
            <el-button class="sendBtn" @click="sendCode($event)" :disabled="ableCode">{{fontTime}}</el-button>
            <span class="input-placeholder" @click="getFocus('registerCodeUser')" v-if="!loginInfo.codeUser">短信验证码</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer successBind loading-wrapper">
          <el-button :loading="finishBool" @click="dialogShow('registerVaild')">完&nbsp;&nbsp;成</el-button>
        </span>
      </div>

    </div>
</template>

<script>
  import Verify from 'plus/getVerify'
  import mixins from 'plus/mixin'
  import * as pwdS from 'plus/pwdStrength'
  import * as opreate from 'api/getData'
  import { mapActions , mapGetters } from 'vuex'
  import { setToken } from 'plus/auth'


  export default {
      name: "register",
      data(){
        return{
          firstStep:true,
          val:false,
          checkPhone:false,
          bindPhone:'',
          checkCode:false,
          codeUser2:'',
          codeUser1:'',
          times:'60',
          firstSent:true,
          loadingBool: false,
          finishBool: false,
          time1:'',
          ableLogin:true,
          ableCode:false,
          fontTime:'发送验证码'
        }
      },
      inject:['reload'],
      computed:{
        ...mapGetters([
          'cityId',
          'resetFlag',
          'registerTime'
        ])
      },
      mixins: [mixins.mixin],
      props:['titleOne','contract'],
      mounted(){
        this.setFlag(false)
        this.codeUser2 = new Verify("v_container")
      },
      methods:{
        ...mapActions([
          "setUser",
          'setFlag',
          'setRegisterTime',
          'setDialogClose'
        ]),
        pwS(value){
          this.loginMsg = pwdS.pwStrength(value)
          if(value.length >= 8){
            if (this.loginMsg){
              this.$refs['registerVaildOne'].validateField('passWord')
            }else {
              this.loginMsg = ''
              this.$refs['registerVaildOne'].validateField('passWord')

            }
          }

        },
        login(){
          this.$emit('login')
        },
        gokConcat(){
          const {href} = this.$router.resolve({
            path: 'contract'
          })
          window.open(href, '_blank')
          //this.$emit("update:contract",true)
        },
        countDown(){
          clearInterval(this.time1)
          if(!this.firstSent){
            setTimeout(()=>{
              this.codeUser1 = new Verify({id:'v_container2',canvasId:'verifyID2'})
            },100)
          }
          this.times = 60
          this.ableCode = true
          this.time1 = setInterval( () =>{
            if(this.times <= 0){
              clearInterval(this.time1)
              this.ableCode = false
              this.fontTime = '发送验证码'
            }else {
              this.times--
              this.fontTime = '已发送('+ this.times + ')'
            }
          },1000)

        },
        nextStep(){
          this.$refs['registerVaildOne'].validate((valid)  => {
            if (valid) {
              this.loadingBool = true
              opreate.bindPhone(this.loginInfo.phoneUser,'').then(res =>{
                if(res.code === '1'){
                  this.loginMsg = res.data.Exception
                  this.firstSent = res.data.firstSent
                  this.$refs['registerVaild'].validateField("codeUser")
                  this.countDown()
                  this.bindPhone = res.verCode
                  this.$emit("update:titleOne",'绑定手机号')
                  this.firstStep = false
                  this.loadingBool = false
                }else if(res.code === '50000'){
                  this.loginMsg = res.message
                  this.loadingBool = false
                  this.$refs['registerVaildOne'].validateField('phoneUser')
                }else {
                  this.firstSent = res.data.firstSent
                  this.loginMsg = ''
                  this.$refs['registerVaild'].resetFields()
                  this.countDown()
                  this.bindPhone = res.verCode
                  this.$emit("update:titleOne",'绑定手机号')
                  this.firstStep = false
                  this.loadingBool = false
                }

              })
            } else {
              return false;
            }
          })
        },
        sendCode(e){
          if(!this.firstSent){
            this.$refs['registerVaild'].validateField('codeUser1', (c) => {
              if(c == ''){
                opreate.bindPhone(this.loginInfo.phoneUser,'').then(res =>{
                  this.loginMsg = ''
                  if(res.code === '1'){
                    this.loginMsg = res.data.Exception
                    this.$refs['registerVaild'].validateField("codeUser")
                  }else {
                    this.countDown()
                  }
                })
              }
            })
          }else {
            opreate.bindPhone(this.loginInfo.phoneUser,'').then(res =>{
              this.loginMsg = ''
              if(res.code === '1'){
                this.loginMsg = res.data.Exception
                this.$refs['registerVaild'].validateField("codeUser")
              }else {
                this.countDown()
              }
            })
          }

        },
        dialogShow1(){
          opreate.bindPhone(this.loginInfo.phoneUser,this.loginInfo.codeUser).then(res =>{
            if(res.code === '0'){
              opreate.register(this.loginInfo.phoneUser,this.loginInfo.passWord,this.cityId).then(res => {
                setToken(res.user.token)
                this.setUser(res.user)
                this.setDialogClose(false)
                // this.$emit("update:dialogVisibleRegister",this.val)
                for (let i in this.$refs){
                  if(this.$refs[i]['resetFields']){
                    this.$refs[i].resetFields()
                  }
                }
                this.finishBool = false
                this.reload()
              })
            }else {
              this.finishBool = false
              this.loginMsg = res.message
              this.$refs['registerVaild'].validateField("codeUser")
            }
          })
        },
        getFocus(el){
          this.$refs[el].focus()
        }
      },
      watch:{
        titleOne(e){
          if(e === '注册国科学院账号'){
            this.firstStep = true
          }
        },
        resetFlag(e){
          if(e === true){
            for (let i in this.$refs){
              if(this.$refs[i]['resetFields']){
                this.$refs[i].resetFields()
              }
            }
          }
        }
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~style/base"

  .fade-enter-active, .fade-leave-active
    transition: all 1s;

  .fade-enter, .fade-leave-to
    opacity: 0;
    transform: translateY(-40px);

  .fade1-enter-active, .fade1-leave-active
    transition: all 1s;

  .fade1-enter, .fade1-leave-to
    opacity: 0;
    transform: translateY(-40px);

  .agreement a
    color $color-theme
    text-decoration none
    cursor pointer

  .agreement
    margin-top 30px
    font-size 13px

  .iconmsg{
    text-align center
    font-size 40px
  }
  .sendsuccess
    text-align center

  .successBind
    margin-top 30px
    margin-bottom 50px

  .strength
    height 0px
    position relative
    top -18px
    div
      display inline-block
      width 30%
      height 4px
      background #E5E5E5
      margin-right 3%

  .strengthC
    margin-right 0%!important

  .el-button
    padding 12px 0px
    border none
.agreementBottom{
  margin-bottom: 0 !important;
}
.input-placeholder{
  position absolute
  left 0
  top 0
  color rgba(118,118,118,1)
}
</style>
